<template>
	<section>
		<!--列表-->
		<el-table :data="logs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <!--设置模板-->
			<el-table-column prop="userName" label="用户名" width="120" sortable>
			</el-table-column>
      <el-table-column prop="userIp" label="ip地址" width="130" sortable>
      </el-table-column>
      <el-table-column prop="requestMethod" label="方法" min-width="10" sortable>
        <template slot-scope="scope">
          <el-tag :type="scope.row.requestMethod | nodeState">{{
            scope.row.requestMethod
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="操作时间" width="180" sortable>
      </el-table-column>
      <el-table-column prop="requestDesc" label="描述" min-width="50" sortable>
      </el-table-column>

		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<!--<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>-->
		<!--新分页条-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="float:right;">
      </el-pagination>

    </el-col>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getDepartmentListPage, removeDepartment, batchRemoveDepartment, editDepartment, addDepartment } from '../../api/api';

	export default {
		data() {
			return {
				total: 55,
        pageSizes:[5, 10, 15, 20],//分页的规则
        currentPage:1,//当前页
        pageSize:10,//每页显示条目个数
        title:"",
				listLoading: false,
        logs: [],//用来装日志的返回信息
			}
		},
    filters: {
    //过滤状态颜色
    nodeState(e) {
      let data = {
        update: "success",
        inset: "info",
        batch: "danger",
        add:"warning"
      };
      return data[e];
    },
  },
		methods: {
		  //三、页码发生改变
      handleCurrentChange(val){
        console.log(val)
        /*把新页码交给模型层的数据,页码发生改变，1，把页码赋值给当前页码，带着一页多少条一起去数据库查*/
        this.currentPage=val
        console.log("赋值后的当前页："+this.currentPage+"页总数："+this.pageSize)
        //2、调用getVehicles查询
        this.getLog()
      },
		  //二、页数发生改变
      handleSizeChange(val){
        /*分析，页数量发生改变，把数量赋值给模型层*/
        console.log(val)
        console.log("赋值后的当前页："+this.currentPage+"页总数："+this.pageSize)
        this.pageSize=val;
        //调用depart方法
        this.getLog();
      },
			//一、获取日志列表
			getLog() {
        //1、将数值加到对象里面
        let para = {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
        };
        console.log(para)
				//2、简单写法，显示到列表
          this.$http.post("/log",para).then(
              result=>{
                //3、把返回的数值同步到模型层
                this.logs=result.data.rows;
                this.total=result.data.total;
              }
          ).catch(
              result=>{
                console.log("查询失败，请刷新重试")
              }
          )
			},
      selsChange: function (sels) {
        this.sels = sels;
      },
		},
		mounted() {
			this.getLog();
		}
	}

</script>

<style scoped>

</style>